<template>
  <a-modal v-model:visible="visible" title="设备报废" :mask-closable="false" :esc-to-close="false"
    :width="width >= 500 ? 500 : '100%'" draggable @before-ok="save" @close="reset">

    <GiForm ref="formRef" v-model="form" :columns="columns" />
  </a-modal>

</template>

<script setup lang="ts">
  import { Message, type TreeNodeData } from '@arco-design/web-vue'
  import { useWindowSize } from '@vueuse/core'
  import { getUser, updateUserRole } from '@/apis/system'
  import { type ColumnItem, GiForm } from '@/components/GiForm'

  import { useResetReactive } from '@/hooks'
  import { deviceDiscard} from '@/apis/asset/device/records'


  const emit = defineEmits < {
    (e: 'save-success'): void
  }> ()

  const { width } = useWindowSize()
  const visible = ref(false)

  const formRef = ref < InstanceType < typeof GiForm >> ()
  const [form, resetForm] = useResetReactive({})

  const columns: ColumnItem[] = reactive([
      
    {
      label: '报废说明',
      field: 'discardDescription',
      type: 'textarea',
      span: 24,
      required: true,
    }
  ])

  // 重置
  const reset = () => {
    formRef.value?.formRef?.resetFields()
    resetForm()
  }

  // 保存
  const save = async () => {
    try {
      const isInvalid = await formRef.value?.formRef?.validate()
      if (isInvalid) return false
      console.log(form)
      await deviceDiscard(form)
      Message.success('报废成功')
      emit('save-success')
      return true
    } catch (error) {
      return false
    }

  }

  // 初始化
  const onOpen = async (deviceId,userId) => {
    reset()
    // 指定设备id
    form.deviceId = deviceId;
    form.userId = userId;
    visible.value = true
  }

  defineExpose({ onOpen })
</script>

<style scoped lang="scss"></style>